<div ng-controller="AppCtrl as vm" layout="column" layout-margin style="padding:25px;" ng-cloak>

  <h4 style="margin-top:10px">Determinate</h4>

  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They
    give users a quick sense of how long an operation will take.</p>

  <div layout="row" layout-sm="column" layout-align="space-around">
    <md-progress-circular md-mode="determinate" value="{{vm.determinateValue}}"></md-progress-circular>
  </div>

  <h4>Indeterminate</h4>

  <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to
    expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>

  <div layout="row" layout-sm="column" layout-align="space-around">
    <md-progress-circular md-mode="indeterminate"></md-progress-circular>
  </div>

  <h4>Theming </h4>

  <p>
    Your current theme colors can be used to easily colorize your progress indicator with `md-warn` or `md-accent`
    colors.
    To easily hide a <b>&lt;md-progress-circular&gt;</b> component, simply set the <b>md-mode</b> to "" or null.
  </p>

  <div layout="row" layout-sm="column" layout-align="space-around">
    <md-progress-circular class="md-hue-2" md-mode="{{vm.modes[0]}}" md-diameter="20px"></md-progress-circular>
    <md-progress-circular class="md-accent" md-mode="{{vm.modes[1]}}" md-diameter="40"></md-progress-circular>
    <md-progress-circular class="md-accent md-hue-1" md-mode="{{vm.modes[2]}}" md-diameter="60"></md-progress-circular>
    <md-progress-circular class="md-warn md-hue-3" md-mode="{{vm.modes[3]}}" md-diameter="70"></md-progress-circular>
    <md-progress-circular md-mode="{{vm.modes[4]}}" md-diameter="96"></md-progress-circular>
  </div>


  <hr ng-class="{'visible' : vm.activated}">

  <div id="loaders" layout="row" layout-align="start center">

    <p>Progress Circular Indicators: </p>

    <h5>Off</h5>
    <md-switch
        ng-model="vm.activated"
        ng-change="vm.toggleActivation()"
        aria-label="Toggle Progress Circular Indicators">
      <h5>On</h5>
    </md-switch>
  </div>

  <p class="small">
    Note: With above switch -- that simply clears the md-mode in each <code>&lt;md-progress-linear md-mode=""&gt;</code>
    element --
    developers can easily disable the animations and hide their progress indicators.
  </p>

</div>
